<template>
	<view class="bar-style">
		<view v-for="(item,index) in proccessList" :key="index" style="display: flex;">
			<canvas class="canvas-style" :canvas-id="item.type" :id="item.type"></canvas>
			<view class="proccess-note">
				<view class="note-content" @click="showMore(index)">{{prepare(item.commentMsg)}}</view>
				<view class="note-content">{{item.time}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	/**
	 * author: 陈炎
	 * description: 用于显示各模块处理进度
	 * proccessList为对象数组，单个对象需要包含type，commentMsg，time属性
	 * type用于表示里程点的样式
	 * type总共有四种startCanvas,firstCanvas,middleCanvas,lastCanvas
	 * 		startCanvas表示仅有一条记录时，单个里程点的样式
	 * 		firstCanvas表示有两条及以上记录时，首个里程点 的样式
	 * 		middleCanvas表示有三条及以上记录时，中间里程点 的样式
	 * 		lastCanvas表示有两条及以上记录时，最后一个里程点 的样式
	 * commentMsg用于表示里程点对应的信息
	 * time用于表示该里程点的时间
	 * 示例 
	 * proccessList:[
			{'type':'firstCanvas','commentMsg':'发起申请','time':'2021-01-01 01:01:11'},
			{'type':'middleCanvas','commentMsg':'制卡完毕','time':'2020-02-02 02:02:22'},
			{'type':'lastCanvas','commentMsg':'收到卡片和票据','time':'2020-03-03 03:33:33'}
		]
	 */
	export default{
		props: {
			proccessList: {
				type: Array,
				default: ''
			},
		},
		methods:{
			prepare(text){
				let temp = ''
				if(text.length >= 15){
					temp = text.substring(0,15) + '...(点击查看更多)'
				}else{
					temp = text
				}
				return temp
			},
			showMore(index){
				uni.showModal({
					title: '详细',
					content:this.proccessList[index].commentMsg,
					showCancel:false
				})
			}
		},
		mounted() {
			let first = uni.createCanvasContext('firstCanvas')
			let middle = uni.createCanvasContext('middleCanvas')
			let last = uni.createCanvasContext('lastCanvas')
			let start = uni.createCanvasContext('startCanvas')
			let device=uni.getSystemInfo();
			var screenWid;
			uni.getSystemInfo({
				success:function(res){
					screenWid = res.windowWidth
				}
			})
			let wid = screenWid/375;
			first.arc(25*wid, 25*wid, 3*wid, 0, 5*wid* Math.PI, false)
			first.setFillStyle("#808080")
			first.fill()
			first.moveTo(25*wid,50*wid)
			first.lineTo(25*wid,25*wid)
			first.lineWidth = 2
			first.setStrokeStyle("#808080")
			first.stroke()
			first.draw()
			middle.arc(25*wid, 25*wid, 3*wid, 0, 5*wid* Math.PI, false)
			middle.setFillStyle("#808080")
			middle.fill()
			middle.moveTo(25*wid,0)
			middle.lineTo(25*wid,50*wid)
			middle.lineWidth = 2
			middle.setStrokeStyle("#808080")
			middle.stroke()
			middle.draw()
			last.arc(25*wid, 25*wid, 3*wid, 0, 5*wid* Math.PI, false)
			last.setFillStyle("#808080")
			last.fill()
			last.moveTo(25*wid,25*wid)
			last.lineTo(25*wid,0)
			last.lineWidth = 2
			last.setStrokeStyle("#808080")
			last.stroke()
			last.draw()
			start.arc(25*wid, 25*wid, 3*wid, 0, 5*wid* Math.PI, false)
			start.setFillStyle("#808080")
			start.fill()
			start.setStrokeStyle("#808080")
			start.stroke()
			start.draw()
		},
	}
</script>

<style>
	.bar-style{
		margin: 0 0 30rpx 25rpx;
	}
	.canvas-style{
		width: 100rpx; 
		height: 100rpx;
	}
	.proccess-note{
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	.note-content{
		font-size: 26rpx;
	}
</style>
